<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>预约挂号平台-报告查询</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
        }

        .el-header {
            padding: 20px 10%;

        }


        .el-header > img {
            float: left
        }

        .el-footer {
            width: 100%;
            background: url(imgs/footer_bg.png);
            color: #fff;
        }

        .header-title {
            float: left;
            line-height: 65px;
            color: #ff82ae;
            font-size: 30px;
            font-weight: bolder
        }

        #b1 {
            font-size: 16px;
            color: black;
        }

        #b1:hover {
            color: #ff82ae;
        }

        .el-menu--horizontal > .el-menu-item.is-active {
            border: 0;
        }

        .el-menu--horizontal > .el-menu-item {
            border: 0;
        }

        /*以上为头脚常规style*/
        .el-main {
            background-color: #f8f8f8
        }

        .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
            height: 50px;
            width: 150px;
            text-align: center;
            font-size: 15px;
            line-height: 50px;
            color: #d31151;
            font-weight: bold;
            background: #fff;
            border-top: 5px solid #d31151;
        }

        .el-tabs--border-card > .el-tabs__header .el-tabs__item {
            background-color: #f8f8f8;
            width: 150px;
            text-align: center;
        }

        .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):not(.is-active):hover {
            color: #909399;
        }

        .el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
            color: #d31151;
        }

        .el-table th.el-table__cell.is-leaf {
            border-bottom: 4px solid #e9739b;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="height: fit-content"><img src="imgs/logo.png" alt="" width="358px" height="65px">
            <div class="header-title">丨预约挂号平台</div>
            <div style="float: right;margin:20px 10%">
                <el-button size="medium" @click="index()"
                           style="background-color: #ff82ae;color: #fff;margin-right: 30px">返回首页
                </el-button>
                <span v-html="'您好！'+user.username"></span>
                <el-divider direction="vertical"></el-divider>
                <el-button @click="exit" type="text" id="b1">退出</el-button>
            </div>
        </el-header>
        <el-main style="padding: 0;overflow:hidden;">
            <el-menu
                    :default-active="activeIndex"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#ff82ae"
                    text-color="#fff"
                    active-text-color="#fff"
                    style="padding-left: 10%;border-bottom:none">
                <el-menu-item index="1">预约挂号</el-menu-item>
                <el-menu-item index="2">我的预约</el-menu-item>
                <el-menu-item index="3">报告查询</el-menu-item>
            </el-menu>
            <img src="imgs/report_bg.png" width="100%">
            <div style="margin: 50px 15%">
                <el-tabs type="border-card">
                    <el-tab-pane label="检验报告">
                        <div style="margin:20px 5%"><span style="width:80px">时间：</span>
                            <el-date-picker
                                    v-model="value2"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions">
                            </el-date-picker>
                            <el-button size="medium" @click="search()"
                                       style="background-color: #ff82ae;color: #fff;margin-left: 30px">查询
                            </el-button>
                        </div>
                        <div>
                            <template>
                                <el-table
                                        :data="report1Data"
                                        style="width: 90%;margin:0 5%;min-height: 600px"
                                >
                                    <img slot="empty" src="imgs/icon_nodata.png" style="margin-top:150px" alt="">
                                    <el-table-column
                                            type="index"
                                            label="序号">
                                    </el-table-column>
                                    <el-table-column
                                            prop="name"
                                            label="检验名称"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="date"
                                            label="检验日期"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="reportType"
                                            label="报告类型"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="reportNumber"
                                            label="检验单号"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    type="primary"
                                                    @click="handleShow(scope.$index, scope.row)">查看
                                            </el-button>
                                            <el-button
                                                    size="mini"
                                                    type="success"
                                                    @click="handleDownload(scope.$index, scope.row)">下载
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="检查报告">
                        <div style="margin:20px 5%"><span style="width:80px">时间：</span>
                            <el-date-picker
                                    v-model="value2"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions">
                            </el-date-picker>
                            <el-button size="medium" @click="search()"
                                       style="background-color: #ff82ae;color: #fff;margin-left: 30px">查询
                            </el-button>
                        </div>
                        <div>
                            <template>
                                <el-table
                                        :data="report2Data"
                                        style="width: 90%;margin:0 5%;min-height: 600px"
                                >
                                    <img slot="empty" src="imgs/icon_nodata.png" style="margin-top:150px" alt="">
                                    <el-table-column
                                            type="index"
                                            label="序号">
                                    </el-table-column>
                                    <el-table-column
                                            prop="name"
                                            label="检查类型"
                                            width="80">
                                    </el-table-column>
                                    <el-table-column
                                            prop="date"
                                            label="检查日期"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="part"
                                            label="检查部位"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="reportProject"
                                            label="检查项目"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="reportResult"
                                            label="检查结果"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    type="primary"
                                                    @click="handleShow(scope.$index, scope.row)">查看
                                            </el-button>
                                            <el-button
                                                    size="mini"
                                                    type="success"
                                                    @click="handleDownload(scope.$index, scope.row)">下载
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-main>
        <el-footer style="padding: 0;height: 310px">
            <div style="margin:30px 15%;">
                <el-row>
                    <el-col span="12" style="text-align: left;line-height: 25px;">
                        <p>传真：xxx-xxxxxxxx</p>
                        <p>邮箱：xxxxx@xxx.com</p>
                        <p>邮编：xxxxxxx</p>
                        <p>地址：xxxxxxxxxxxxxx</p>
                    </el-col>
                    <el-col span="12">
                        <el-row style="overflow: unset">
                            <el-col span="8" style="text-align: center"><img src="imgs/qcode_gy.png"><br>京海龙龙美容整形<br>医院微官网
                            </el-col>
                            <el-col span="8" style="text-align: center"><img src="imgs/qcode_gy.png"><br>京海龙龙美容整形<br>医院订阅号
                            </el-col>
                            <el-col span="8" style="text-align: center"><img src="imgs/qcode_gy.png"><br>京海龙龙美容整形<br>医院服务号
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <h5 style="text-align: center;font-weight: normal">备案号：陕ICP备19005307号 Copyright © 西安国际医学中心 版权所有</h5>
            </div>

        </el-footer>
    </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex: '1',
                user: {username: "用户名", age: ""},
                arr: [{}],
                value: '',
                report1Data: [
                    //     {name: "血常规",date: "2023-05-02 10:23",reportType: "XX类型",reportNumber: "0000001230123"
                    // },
                    //     {name: "血常规", date: "2023-05-02 10:23", reportType: "XX类型", reportNumber: "0000001216123"}
                ],
                report2Data: [
                    //     {name: "超声",date: "2023-05-02 10:23",part: "心脏",reportProject: "下腔静脉变异度",reportResult: "无明显异常"
                    // },
                    //     {name: "CT", date: "2023-05-02 10:23", part: "胸部", reportProject: "平扫+增强", reportResult: "异常请查看"}
                ],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value1: '',
                value2: ''
            }
        },
        methods: {
            exit() {
                v.$message("退出")
            },
            index() {
                location.href = "index.html"
            },
            search() {
                v.$message("查询")
            },
            handleSelect(key, keyPath) {
                switch (parseInt(key)) {
                    case 1 :
                        v.$message("跳转预约挂号页");
                        break;
                    case 2 :
                        location.href = "/appointList.html";
                        break;
                    // case 3 :
                    //     location.href = "/reportList.html";
                    //     break;
                    default:
                        console.log(key);
                }
            },
            handleShow(index, row) {
                v.$message("弹出报告单");
            },
            handleDownload(index, row) {
                v.$message("下载报告单")
            }

        }
    })
</script>
</html>